<template>
	<div class="app-container">
		
		<el-timeline>
			<el-timeline-item type="primary">
				<span style="font-size: 18px;font-weight: 600;padding-right: 10px;">审批</span>
				<span style="color: #555;">{{isDay}}</span>
				<el-card  style="margin-top: 20px;" shadow="never">
					<el-form ref="form" :model="form" :rules="rules" label-width="80px">
						<el-row>
							<el-col :span="24">
								<el-form-item label="附件" prop="noticeTitle">
									<myFileUpload :disabled="false" ref="myFileUpload" type="img" :fileList="[]" name="images"
										placeholder="只能上传image/pdf文件" accept="image/gif,image/jpeg,application/pdf,image/png"
										:autoUpload="true" :uploadData="{iid:null,fileTypeCode:'shouru',name:'null'}"
										@uploadOk="(e)=>{}"></myFileUpload>
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="内容">
									<!-- <editor v-model="form.noticeContent" :min-height="192" /> -->
									<el-input type="textarea" v-model="form.noticeContent" placeholder="请输入填报内容">
									</el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</el-card>
			</el-timeline-item>
			<el-timeline-item v-for="(item,key) in activities" :key="key" type="primary">
				<span :style="{color:item.status == 1?'green':'red'}"
					style="font-size: 18px;font-weight: 600;padding-right: 10px;">{{item.status == 1?'通过':'驳回'}}</span>
				<span style="color: #555;">{{item.timestamp}}</span>
				<el-card style="margin-top: 20px;" shadow="never">
					<myFileUpload :disabled="true" ref="myFileUpload" type="img" :fileList="[]" name="images"
						placeholder="只能上传image/pdf文件" accept="image/gif,image/jpeg,application/pdf,image/png"
						:autoUpload="true" :uploadData="{iid:null,fileTypeCode:'shouru',name:'null'}"
						@uploadOk="(e)=>{}"></myFileUpload>
					<div v-html="form.noticeContent"></div>
				</el-card>
			</el-timeline-item>
		</el-timeline>
	</div>
</template>

<script>
	import {
		listNotice,
		getNotice,
		delNotice,
		addNotice,
		updateNotice
	} from "@/api/system/notice";
	import myFileUpload from './newUploadFile.vue'
	import dayjs from "dayjs";
	export default {
		name: "Notice",
		components: {
			myFileUpload
		},
		dicts: ['sys_notice_status', 'sys_notice_type'],
		data() {
			return {
				 activities: [],
				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 公告表格数据
				noticeList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					noticeTitle: undefined,
					createBy: undefined,
					status: undefined
				},
				// 表单参数
				form: {},
				// 表单校验
				rules: {
					noticeTitle: [{
						required: true,
						message: "公告标题不能为空",
						trigger: "blur"
					}],
					noticeType: [{
						required: true,
						message: "公告类型不能为空",
						trigger: "change"
					}]
				},
				isDay:null
			};
		},
		created() {
			this.isDay = dayjs().format('YYYY-MM-DD')
			this.getList();
		},
		methods: {
			/** 查询公告列表 */
			getList() {
				this.loading = true;
				listNotice(this.queryParams).then(response => {
					this.noticeList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
					noticeId: undefined,
					noticeTitle: undefined,
					noticeType: undefined,
					noticeContent: undefined,
					status: "0"
				};
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.noticeId)
				this.single = selection.length != 1
				this.multiple = !selection.length
			},
			/** 新增按钮操作 */
			handleAdd() {
				this.reset();
				this.open = true;
				this.title = "添加公告";
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.reset();
				const noticeId = row.noticeId || this.ids
				getNotice(noticeId).then(response => {
					this.form = response.data;
					this.open = true;
					this.title = "修改公告";
				});
			},
			/** 提交按钮 */
			submitForm: function() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						if (this.form.noticeId != undefined) {
							updateNotice(this.form).then(response => {
								this.$modal.msgSuccess("修改成功");
								this.open = false;
								this.getList();
							});
						} else {
							addNotice(this.form).then(response => {
								this.$modal.msgSuccess("新增成功");
								this.open = false;
								this.getList();
							});
						}
					}
				});
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const noticeIds = row.noticeId || this.ids
				this.$modal.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项？').then(function() {
					return delNotice(noticeIds);
				}).then(() => {
					this.getList();
					this.$modal.msgSuccess("删除成功");
				}).catch(() => {});
			}
		}
	};
</script>